import Taro, { Component } from '@tarojs/taro'
import { View, Input, Button, Picker } from '@tarojs/components'
import { AtModal, AtModalHeader, AtModalContent, AtModalAction, AtList, AtListItem, AtAccordion } from 'taro-ui'
import moment from 'moment'
import { checkPwd, getEmployeeSalary, getEmployeeSalaryModule } from './service'
import './index.scss'
import { setAuthToken } from '../../actions/authToken'
import { connect } from '@tarojs/redux'
import Loader from '../components/Loader'
import NoData from '../components/NoData'

@connect(({ authToken }) => ({
  authToken
}), (dispatch) => ({
  setAuthToken (data) {
    dispatch(setAuthToken(data))
  },
}))
export default class salary extends Component {

  config = {
    navigationBarTitleText: '薪资查询'
  }

  constructor (props) {
    super(props)
    this.state = {
      modalIsOpened: true,
      isPassVerification: false,
      date: moment(new Date()).format('YYYY'),
      towPassword: null,
      authToken: null,
      employeeSalaryModule: {},
      employeeSalary: {
        list: [],
        sum: {}
      },
      open: false,
      loading: false,
    }
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  onTimeChange = e => {
    this.getEmployeeSalaryByYear(e.detail.value, this.props.authToken)
    this.setState({ date: e.detail.value })
  }

  setTowPassword = e => {
    this.setState({ towPassword: e.detail.value })
  }

  handleClose = () => {
    Taro.navigateBack().then()
  }

  handleConfirm = () => {
    let { towPassword, date } = this.state
    checkPwd(towPassword).then(res => {
      if (res.flag) {
        this.props.setAuthToken(res.data)
        this.setState({ modalIsOpened: false, isPassVerification: true, authToken: res.data })
        this.getEmployeeSalaryByYear(date, res.data)
        getEmployeeSalaryModule(res.data).then(salaryModuleRes => {
          this.setState({ employeeSalaryModule: salaryModuleRes })
        })
      }
    })
  }

  getEmployeeSalaryByYear = (date, authToken) => {
    this.setState({ loading: true })
    getEmployeeSalary({ yymm: `${date}-01`, endyymm: `${date}-12`, authToken }).then(salaryRes => {
      this.setState({ loading: false })
      if (salaryRes.flag) {
        this.setState({ employeeSalary: salaryRes.data })
      } else {
        Taro.showToast({
          title: `${salaryRes.error}`,
          icon: 'none',
          duration: 2000
        })
        this.props.setAuthToken('')
      }
    })
  }

  turnToDetail = (item) => {
    Taro.navigateTo({
      url: '/pages/salary/detail/index?detailData=' + JSON.stringify(item)
    })
  }

  handleClickAccordion (value) {
    this.setState({
      open: value
    })
  }

  render () {
    const { loading, employeeSalaryModule, employeeSalary } = this.state
    if (this.props.authToken) {
      return (
        <View>
          <View style={{ background: '#ffffff', borderTop: '1px solid #d6e4ef', marginTop: '8pt' }}>
            <AtList hasBorder={true}>
              <AtListItem title='定薪标准' extraText={employeeSalaryModule.total || ''}/>
              <AtListItem title='基本工资基数' extraText={employeeSalaryModule.bsalaryBase || ''}/>
              <AtListItem title='模块工资基数' extraText={employeeSalaryModule.mkBases || ''}/>
              {/*{employeeSalaryModule.bases && <AtListItem title='基本工资' extraText={employeeSalaryModule.bases}/>}*/}
              {/*{employeeSalaryModule.mkBases && <AtListItem title='模块工资基数' extraText={employeeSalaryModule.mkBases}/>}*/}
              {/*{employeeSalaryModule.jb && <AtListItem title='加班工资' extraText={employeeSalaryModule.jb}/>}*/}
              {/*{employeeSalaryModule.jy && <AtListItem title='竞业津贴' extraText={employeeSalaryModule.jy}/>}*/}
              {/*{employeeSalaryModule.sb && <AtListItem title='社保津贴' extraText={employeeSalaryModule.sb}/>}*/}
              {/*{employeeSalaryModule.tx && <AtListItem title='通讯补贴' extraText={employeeSalaryModule.tx}/>}*/}
              {/*{employeeSalaryModule.jiaotongbutie && <AtListItem title='交通补贴' extraText={employeeSalaryModule.jiaotongbutie}/>}*/}
              {/*{employeeSalaryModule.zczg && <AtListItem title='职称资格补贴' extraText={employeeSalaryModule.zczg}/>}*/}
              {/*{employeeSalaryModule.bucSbjt && <AtListItem title='补充社保津贴' extraText={employeeSalaryModule.bucSbjt}/>}*/}
            </AtList>
          </View>
          <View className='tips'>
            工资属于个人隐私信息，任何人不得打听或泄露工资，否则按照公司规章制度进行处罚。
          </View>
          <View className='salaryTopBar'>
            月度工资条：
            <Picker mode='date' fields='year' value={this.state.date} onChange={this.onTimeChange.bind(this)}>
              <View className='picker main-bg'>
                {this.state.date} <View className='at-icon at-icon-chevron-down iconStyle'></View>
              </View>
            </Picker>
          </View>
          {
            !loading
              ? employeeSalary.list.length > 0
                ? <AtList className='list'>
                  {
                    employeeSalary.list.map(item =>
                      <AtListItem key={item.time} title={`${item.month}`} onClick={() => this.turnToDetail(item)} arrow='right'/>
                    )
                  }
                </AtList>
                : <NoData/>
              : <Loader/>
          }
        </View>
      )
    } else {
      return (
        <AtModal isOpened={this.state.modalIsOpened}>
          <AtModalHeader>二级密码校验</AtModalHeader>
          <AtModalContent>
            <View style='border-bottom: #cccccc solid 1pt; padding: 2pt; margin:0 10pt'>
              <Input style='height: 20pt; margin-top: 6pt' type='text' onInput={this.setTowPassword} password={true}
                     placeholder='请输入二级密码' focus/>
            </View>
            <View style={{ fontSize: '8pt', color: '#c1c1c1', padding: '16pt 12pt 0 12pt' }}>若忘记密码请在电脑自助端找回</View>
          </AtModalContent>
          <AtModalAction>
            <Button onClick={this.handleClose}>取消</Button>
            <Button onClick={this.handleConfirm.bind(this)}>确定</Button>
          </AtModalAction>
        </AtModal>
      )
    }
  }
}
